
<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="utf-8" />
    <title>Iframe height demo</title>
    <style media="screen,print">
        #body {
            width:70em;
            max-width:100%;
            margin:0 auto;
        }
        iframe {
            width:100%;
            margin:0 0 1em;
            border:0;
        }
    </style>
    <script>
        /*
         * When the iframe is on a different subdomain, uncomment the following line
         * and change "example.com" to your domain.
         */
        // document.domain = "example.com";
        function setIframeHeight() {
            var iframe = document.getElementById("external-frame");
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document) {
                    iframe.height = getDocumentPort(iframeWin.document).height;
                }
            }
        };
        //获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙
        function getDocumentPort (document) {
            if(document.compatMode == "BackCompat") {
                return {
                    width: document.body.scrollWidth,
                    height: document.body.scrollHeight
                };
            } else {
                return {
                    width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
                    height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
                }
            }
        }

        window.setInterval("setIframeHeight()", 200);
        // window.onload = function () {
        // 	setIframeHeight(document.getElementById('external-frame'));
        // };
    </script>
</head>
<body>
<div id="body">
    <h1>Iframe height demo</h1>
    <h2><code>iframe</code> <strong>without</strong> height adjustment</h2>
    <iframe src="back.html"></iframe>
    <h2><code>iframe</code> <strong>with</strong> height adjustment</h2>
    <iframe src="back.html" frameborder="0" id="external-frame"></iframe>
    <div id="labfooter">
    </div>
</div>
</body>
</html>